<template>
	<view class="container">
		<view class="layer">
			<view class="address" @click="clickAddress">
				<image class="icon-location" src="../../static/langwen/address_2.png" mode=""></image>
                <view v-if="!defaultAddress.id" style="font-size: 14px;line-height: 14px">请选择地址</view>
				<view v-else class="user">
					<view class="user-header">
						<text class="user-name">{{ defaultAddress.name }}</text>
						<text>{{ defaultAddress.phone || defaultAddress.phoneNumber }}</text>
					</view>
					<view class="user-body">
						{{ defaultAddress.schoolAddress || defaultAddress.proviceName + defaultAddress.cityName + defaultAddress.regionName }}
						<br>
                        {{ defaultAddress.detailAddress }}
					</view>
				</view>
				<image class="icon-arrow" src="../../static/langwen/arrow_right_3.png" mode=""></image>
			</view>
		</view>
		<view class="layer" v-if="orderData.length">
			<view class="goods" v-for="(item,index) in orderData" :key="index">
				<image class="goods-img" :src="item.productPic" mode=""></image>
				<view class="goods-intro">
					<view class="goods-title">{{ item.productName }}</view>
					<view class="goods-quantity">
						<view>{{ item.productAttr }}</view>
						<view>x{{ item.quantity }}</view>
					</view>
					<view class="goods-price">
						¥{{ item.price }}
					</view>
				</view>
			</view>
		</view>
		<view class="layer">
			<view class="object">
				<view class="attribute">
					商品合计
				</view>
				<view class="value">
					¥{{calcAmount.totalAmount || 0}}
				</view>
			</view>
			<view class="object">
				<view class="attribute">
					运费
				</view>
				<view class="value-lowlight">
                    {{calcAmount.freightAmount ? '￥'+calcAmount.freightAmount : !defaultAddress.id ? '请先选择地址' : '包邮'}}
				</view>
			</view>
			<view class="object">
				<view class="attribute">
					活动优惠
				</view>
				<view class="value-orange">
					¥{{calcAmount.promotionAmount}}
				</view>
			</view>
		</view>
		<view class="layer">
			<view class="form-textarea">
				<view class="form-name">买家留言</view>
				<textarea class="form-value" placeholder-style="font-size:14px;font-weight:400;
		color:rgba(191,191,191,1);" placeholder="请输入您的留言"  v-model="info"/>
			</view>
		</view>
		<view class="fixed-bottom">
			<view class="goods-total-price">
				应付金额:<text class="goods-total-price-onrange">¥{{calcAmount.payAmount}}</text>
			</view>
			<view class="goods-pay-btn" @click="payHandle">
				结算
			</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
export default {
	name: 'confirm',
    onLoad(option) {
        if(option.param) {
            var pageParams = JSON.parse(option.param),
                orderInfo = pageParams.orderInfo;
            this.postParams = pageParams;
            this.defaultAddress = orderInfo.address || {};
            this.orderData = orderInfo.cartPromotionItemList;
            this.basicGiftsList = orderInfo.basicGiftsList;
            this.calcAmount = orderInfo.calcAmount;
        }
    },
    onShow() {
        if(this.orderSn) {
            
            console.log('订单提交成功，但是未支付直接返回商城');
            // uni.navigateBack();
            // window.history.go(-1);
        }
    },
    data() {
        return {
            // 默认地址数据
            defaultAddress: {
                id: ''
            },
            // 订单数据
            orderData: [],
            // 买家留言
            info: '',
            basicGiftsList: [], // 优惠信息
            calcAmount: {}, // 价格信息
            postParams: {}, // 提交订单参数
            orderSn: '' // 订单提交成功后的订单编号
        }
    },
    created() {
        
    },
	methods: {
		clickAddress() {
            // 去选择地址
            this.$clound.handleSelectAddress('H5_gotoSelectAdress');
            var self = this;
            window.selectAddressCallback = (data) => {
                self.defaultAddress = data;
                self.fnGetTransFee(data.id);
            };
		},
        async fnGetTransFee(id) {
            // 重新计算运费
            var params = JSON.parse(JSON.stringify(this.postParams));
            params.addressId = id;
            delete params.orderInfo;
            var data = await Api.apiCall('get', Api.goods.priviewOrder, params);
            if(data) {
                this.calcAmount = data.calcAmount;
                // alert('运费：'+this.calcAmount.freightAmount);
            }
        },
        // 支付
		toPay(order) {
            window.paySuccessCallback = (data) => {
                // 支付成功
                // uni.navigateBack();
                window.history.go(-1);
            };
            let { orderSn, payAmount, id } = order;
            this.orderSn = orderSn;
            this.$clound.orderPay(orderSn, payAmount, id);
            window.history.go(-1);
			// uni.switchTab({
			//     url: `/pages/langwen/cart`
			// });
        },
        async payHandle() {
            // 结算
            if(!this.defaultAddress.id) {
                this.$api.msg('请选择地址');
                return;
            }
            var params = this.postParams;
            params.addressId =  this.defaultAddress.id;
            params.content = this.info;
            var data = await Api.apiCall('post', Api.goods.submitOrder, params);
            if(!data) {
                this.$api.msg('结算失败，请返回重试');
                setTimeout(function() {
                    window.history.go(-1);
                }, 1000);
            }else {
                this.toPay(data.order);
            }
        }
	}
}
</script>

<style lang="less">
page {
	background:rgba(245,245,245,1);
}

.container {
	background:rgba(245,245,245,1);
	padding: 0 15px;
	padding-bottom: 50px;
}

.layer {
	padding: 15px;
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 8px 0px rgba(0,0,0,0.02);
	border-radius:8px;
	margin: 10px 0;
}

.fixed-bottom {
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	border-top: 2rpx solid rgb(212,212,212);
	background:rgba(255,255,255,1);
	box-shadow:0px 1px 0px 0px rgba(213,216,225,1);
}

.goods-total-price {
	font-size:16px;
	font-weight:400;
	color:rgba(127,129,141,1);
	margin-left: 15px;
}

.goods-total-price-onrange {
	font-weight:500;
	color: rgba(255,101,24,1);
	margin-left: 5px;
}

.goods-pay-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width:150px;
	height:50px;
	background:rgba(253,155,67,1);
	font-size:16px;
	font-weight:400;
	color:rgba(255,255,255,1);
	margin-top: -1px;
}

.address {
	display: flex;
	align-items: center;
	.icon-location {
		width: 30px;
		height: 30px;
		margin-right: 15px;
		min-width: 30px;
	}
	.user {
		flex-grow: 1;
		.user-header {
			font-size:14px;
			font-weight:400;
			color:rgba(161,165,177,1);
			.user-name {
				font-size:14px;
				font-weight:400;
				color:rgba(63,64,70,1);
				margin-right: 10px;
			}
		}
		.user-body {
			margin-top: 5px;
			font-size:14px;
			font-weight:400;
			color:rgba(63,64,70,1);
			line-height:20px;
		}
	}
	.icon-arrow {
		width: 24px;
		height: 24px;
		min-width: 24px;
		margin-left: 15px;
		margin-right: -8px;
	}
}

.goods {
	display: flex;
	margin-bottom: 15px;
	&:last-child {
		margin-bottom: 0;
	}
	.goods-img {
		width: 60px;
		height: 80px;
		min-width: 60px;
		margin-right: 12px;
	}
	.goods-intro {
		flex-grow: 1;
		overflow: hidden;
		.goods-title {
			font-size:14px;
			font-weight:400;
			color:rgba(51,51,51,1);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.goods-quantity {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			font-size:12px;
			font-weight:400;
			color:rgba(191,191,191,1);
		}
		.goods-price {
			margin-top: 10px;
			font-size:14px;
			font-weight:600;
			color:rgba(255,101,24,1);
		}
	}
}

.object {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	&:first-child {
		margin-top: 0;
	}
	.attribute {
		font-size:14px;
		font-weight:400;
		color:rgba(63,64,70,1);
	}
	.value {
		font-size:14px;
		font-weight:400;
		color:rgba(63,64,70,1);
	}
	.value-lowlight {
		font-size:14px;
		font-weight:400;
		color:rgba(191,191,191,1);
	}
	.value-orange {
		font-size:14px;
		font-weight:500;
		color:rgba(255,101,24,1);
	}
}

.form-textarea {
	.form-name {
		font-size:14px;
		font-weight:400;
		color:rgba(63,64,70,1);
	}
	.form-value {
		margin-top: 10px;
		height: 72px;
		font-size:14px;
        font-weight:400;
        color: #3f4046;
    }
    .form-value::placeholder {
        color:rgba(191,191,191,1);
    }
}
</style>
